<template>
    <div class="contener">
        <!-- 页面 -->
        <div class="page">
            <!-- 搜索 -->
            <transition
                @before-enter="_beforeEnter"
                @enter="_enter"
                @after-enter="_afterEnter"
                @before-leave="_beforeLeave"
                @leave="_leave"
                @after-leave="_afterLeave"
            >
                <div
                    class="search-contener"
                    ref="searchContener"
                    v-show="searchFormConfig.searchContenerShow"
                >
                    <base-form
                        :formItems="searchFormConfig.formItems"
                        :formData="searchFormConfig.formSubmit"
                        ref="searchForm"
                        @onButtonClick="searchBarButtonClick"
                    />
                </div>
            </transition>
            <!-- 表格 -->
            <div class="datas-contener">
                <!-- 表格操作项 -->
                <div class="option-contener">
                    <data-options
                        :leftConfig="buttonConfig.leftConfig"
                        @buttonClick="handelOptionClick"
                        ref="dataOption"
                    />
                </div>
                <!-- 表格展示项 -->
                <div class="table-contener">
                    <base-table
                        ref="baseTable"
                        :tableData="baseTableConfig.tableData"
                        :tableHeader="baseTableConfig.tableHeader"
                        :tableConfig="baseTableConfig.tableConfig"
                        :tree-props="
                            baseTableConfig.tableConfig.treeProps || undefined
                        "
                        @handleSelection="tableDataSelected"
                    >
                        <template slot-scope="{ scope }">
                            <el-switch
                                v-if="scope.type === 'switch'"
                                v-model="scope.row.status"
                                active-value="0"
                                inactive-value="1"
                                @change="switchStatus(scope.row)"
                            />
                            <el-tag
                                v-if="scope.type === 'tag'"
                                :type="'primary'"
                                size="small"
                                >{{
                                    scope.row.menuType
                                        | getAttrName(
                                            menuTypeList,
                                            'value',
                                            'label'
                                        )
                                }}</el-tag
                            >
                            <div v-if="scope.type === 'handle'">
                                <el-button
                                    type="text"
                                    @click.stop="updateTableData(scope.row)"
                                    v-hasPermi="['system/menu/update']"
                                    >修改</el-button
                                >
                                <el-button
                                    type="text"
                                    @click.stop="deleteTableData(scope.row)"
                                    v-hasPermi="['system/menu/delete']"
                                    >删除</el-button
                                >
                            </div>
                        </template>
                    </base-table>
                </div>
            </div>
        </div>
        <!-- 弹框 -->
        <el-dialog
            :title="dialogConfig.title"
            :visible.sync="dialogConfig.show"
            :width="dialogConfig.width"
            v-dialogDrag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
        >
            <!-- 筛选表格列 -->
            <div v-if="dialogConfig.key === 'tableColumn'">
                <base-transfer
                    :transferConfig="tableColumnTransferConfig"
                    ref="baseTransfer"
                />
            </div>
            <!-- 新增 -->
            <div v-if="dialogConfig.key === 'addTableData'">
                <base-form
                    :formItems="addFormConfig.formItems"
                    :formData="addFormConfig.formSubmit"
                    :formConfig="addFormConfig.formConfig"
                    :formRules="addFormConfig.formRule"
                    @onRadioChange="handelStatusChange"
                    ref="addForm"
                    @onButtonClick="addFormButtonClick"
                    @onInputPrependSelectChange="handelInputPrependSelectChange"
                    @onSelectChange="handerOnSelectChange"
                >
                    <template slot="menuIcon">
                        <el-form-item class="menu-icon" label="菜单图标">
                            <el-popover
                                placement="right"
                                width="800"
                                trigger="click"
                                v-model="iconSelectVisible"
                            >
                                <icon-select
                                    @CheckedIcon="handelCheckedMenuIcon"
                                />
                                <el-input
                                    slot="reference"
                                    placeholder="选择菜单图标"
                                    v-model="addFormConfig.formSubmit.icon"
                                    @click="
                                        iconSelectVisible = !iconSelectVisible
                                    "
                                >
                                    <svg-icon
                                        v-if="addFormConfig.formSubmit.icon"
                                        slot="prefix"
                                        :icon-class="
                                            addFormConfig.formSubmit.icon
                                        "
                                        :class="addFormConfig.formSubmit.icon"
                                    />
                                </el-input>
                            </el-popover>
                        </el-form-item>
                    </template>
                </base-form>
            </div>
            <!-- 修改 -->
            <div v-if="dialogConfig.key === 'updateTableData'">
                <base-form
                    :formItems="updateFormConfig.formItems"
                    :formData="updateFormConfig.formSubmit"
                    :formConfig="updateFormConfig.formConfig"
                    :formRules="updateFormConfig.formRule"
                    @onRadioChange="handelStatusChange"
                    ref="updateForm"
                    @onButtonClick="updateFormButtonClick"
                    @onSelectChange="handerOnSelectChange"
                >
                    <template slot="menuIcon">
                        <el-form-item class="menu-icon" label="菜单图标">
                            <el-popover
                                placement="right"
                                width="800"
                                trigger="click"
                                v-model="iconSelectVisible"
                            >
                                <icon-select
                                    @CheckedIcon="handelCheckedMenuIcon"
                                />
                                <el-input
                                    slot="reference"
                                    placeholder="选择菜单图标"
                                    v-model="updateFormConfig.formSubmit.icon"
                                    @click="
                                        iconSelectVisible = !iconSelectVisible
                                    "
                                >
                                    <svg-icon
                                        v-if="updateFormConfig.formSubmit.icon"
                                        slot="prefix"
                                        :icon-class="
                                            updateFormConfig.formSubmit.icon
                                        "
                                        :class="
                                            updateFormConfig.formSubmit.icon
                                        "
                                    />
                                </el-input>
                            </el-popover>
                        </el-form-item>
                    </template>
                </base-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handelCloseDialog"
                    >取 消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="handelCofimeDialog"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index'
import DataOptions from '@/components/dataOptions/index'
import BaseTable from '@/components/baseTable/index'
import BaseTransfer from '@/components/baseTransfer/index'
import globalMixin from '@/mixins/global'
import { moduleSelect } from '@/http/apis/system/module/index'
import { menuTreeselect } from '@/http/apis/system/menu/index'
import IconSelect from '@/components/iconSelect/index'
import {
    menuListAll,
    menuSave,
    menuDelete,
    menuUpdate
} from '@/http/apis/system/menu/index'
import { getDictDatas } from '@/plugins/dict'
import {
    assemblyDataByTableColumn,
    setFormItemProp,
    handleTree
} from '@/utils/tool'
import { mapState } from 'vuex'
export default {
    components: {
        BaseForm,
        DataOptions,
        BaseTable,
        BaseTransfer,
        IconSelect
    },
    computed: {
        ...mapState({
            menuInfo: state => state.menu.menuInfo
        })
    },
    mixins: [globalMixin],
    dicts: [
        'sys_normal_disable',
        'system_menu_type',
        'system_menu_frame',
        'system_menu_visible'
    ],
    data() {
        return {
            menuTypeList: getDictDatas('system_menu_type'),
            // 通用树组件配置
            baseTreeConfig: {
                // tree的数据
                data: [],
                // tree的加载状态
                loading: false,
                // tree选中的树
                currentNodeKey: '',
                // 过滤显示
                filterShow: true,
                entity: {}
            },
            buttonConfig: {
                leftConfig: [
                    {
                        prop: 'addTableData',
                        label: '新增',
                        icon: 'el-icon-plus',
                        type: 'primary',
                        disabled: false,
                        hasPermi: ['system/menu/save']
                    },
                    {
                        prop: 'expandData',
                        label: '展开',
                        icon: 'el-icon-sort',
                        type: 'info',
                        disabled: false,
                        hasPermi: ['*']
                    }
                ],
                expandAll: false
            },
            select: {
                options: []
            },
            // 搜索表单配置
            searchFormConfig: {
                formItems: [
                    [
                        {
                            ltype: 'input', // 大类型（input）
                            placeholder: '请输入菜单名称', // 文字提示
                            label: '菜单名称',
                            prop: 'menuName', // 绑定的key
                            width: 'w-auto'
                        },

                        {
                            ltype: 'select', // 大类型（input）
                            placeholder: '请选择状态', // 文字提示
                            label: '状态',
                            prop: 'status', // 绑定的key
                            width: 'w-auto',
                            options: getDictDatas('sys_normal_disable')
                        },
                        {
                            ltype: 'button', // 大类型（input）
                            type: 'primary',
                            text: '搜索', // 文字提示
                            prop: 'searchDatas', // 绑定的key
                            icon: 'el-icon-search',
                            width: 'w-auto',
                            loading: false
                        },
                        {
                            ltype: 'button', // 大类型（input）
                            type: 'default',
                            text: '重置', // 文字提示
                            prop: 'resetSearchForm', // 绑定的key
                            icon: 'el-icon-refresh-right',
                            width: 'w-auto'
                        }
                    ]
                ],
                formSubmit: {
                    menuName: '',
                    status: ''
                },
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: 'auto'
                },
                // 搜索控件是否显示
                searchContenerShow: true
            },
            // 表格配置
            baseTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'menuName',
                        label: '菜单名称',
                        align: 'left',
                        visible: true,
                        width: '220'
                    },
                    {
                        prop: 'name',
                        label: '所属模块',
                        align: 'left',
                        visible: true
                    },
                    {
                        type: 'tag',
                        prop: 'menuType',
                        label: '菜单类别',
                        align: 'left',
                        visible: true
                    },
                    {
                        prop: 'icon',
                        label: '图标',
                        visible: true
                    },
                    {
                        prop: 'sort',
                        label: '排序',
                        visible: true
                    },
                    {
                        prop: 'component',
                        label: '组件路径',
                        visible: true,
                        showOverflowTooltip: true
                    },
                    {
                        prop: 'perms',
                        label: '权限标识',
                        visible: true
                    },
                    {
                        prop: 'status',
                        type: 'switch',
                        label: '状态',
                        visible: true
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                        visible: true,
                        showOverflowTooltip: true
                    },
                    {
                        label: '操作',
                        type: 'handle',
                        fixed: 'right',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false,
                    rowKey: 'menuId',
                    //树的属性
                    treeProps: {
                        children: 'children',
                        hasChildren: 'hasChildren'
                    }
                },
                // 选中的表格数据
                tableCheckedDatas: []
            },
            // 弹框配置
            dialogConfig: {
                // 弹框标题
                title: '新增',
                // 是否显示
                show: false,
                // 宽度
                width: '30%',
                // 弹框标识(用来区分弹框内容)
                key: ''
            },
            // 查询表格数据的参数
            queryTableParams: {},

            // 表格列筛选配置
            tableColumnTransferConfig: {
                // 穿梭框的数据
                data: [],
                // 穿梭框的标题
                titles: ['显示', '隐藏'],
                // 隐藏的列
                modelList: []
            },
            // 新增表单配置
            addFormConfig: {
                // 表单项
                formItems: [
                    //目录
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择模块名称',
                            label: '模块名称',
                            prop: 'moduleId',
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'treeSelect',
                            placeholder: '请选择上级菜单',
                            label: '上级菜单',
                            prop: 'parentId',
                            multiple: false,
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            label: '菜单类型',
                            prop: 'menuType',
                            width: 'w-1',
                            options: getDictDatas('system_menu_type')
                        }
                    ],
                    [
                        {
                            ltype: 'custom',
                            slotName: 'menuIcon',
                            placeholder: '点击选择图标',
                            label: '菜单图标',
                            prop: 'icon',
                            width: 'w-1',
                            isShow: false,
                            prefixIcon: 'search'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入菜单名称',
                            label: '菜单名称',
                            prop: 'menuName',
                            width: 'w-1',
                            isShow: false
                        },
                        {
                            ltype: 'inputNumber',
                            label: '显示排序',
                            prop: 'sort',
                            width: 'w-1',
                            isShow: false
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            label: '是否外链',
                            prop: 'isFrame',
                            width: 'w-1',
                            options: getDictDatas('system_menu_frame'),
                            isShow: false
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入路由地址',
                            label: '路由地址',
                            prop: 'path',
                            width: 'w-1',
                            isShow: false,
                            question:
                                '选择是外链则路由地址需要以`http(s)://`开头'
                        }
                    ],
                    //菜单
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入路由参数',
                            label: '路由参数',
                            prop: 'routeParam',
                            width: 'w-1',
                            isShow: false,
                            question:
                                '选择是外链则路由参数需要以`http(s)://`开头'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入权限字符',
                            label: '权限字符',
                            prop: 'perms',
                            isShow: false
                        }
                    ],

                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入组件路径',
                            label: '组件路径',
                            prop: 'component',
                            isShow: false,
                            disabled: false,
                            question: '选择是外链则组件路径默认会自动填充'
                        },

                        {
                            ltype: 'radio',
                            label: '是否缓存',
                            prop: 'isCache',
                            width: 'w-1',
                            options: getDictDatas('system_menu_cache'),
                            isShow: false
                        }
                    ],
                    //下面两个为通用

                    [
                        {
                            ltype: 'radio',
                            label: '显示状态',
                            prop: 'visible',
                            width: 'w-1',
                            options: getDictDatas('system_menu_visible'),
                            isShow: false
                        },
                        {
                            ltype: 'radio',
                            label: '菜单状态',
                            prop: 'status',
                            width: 'w-1',
                            options: getDictDatas('sys_normal_disable'),
                            isShow: false
                        }
                    ]

                    //按钮
                ],
                // 提交项
                formSubmit: {
                    menuType: 'M',
                    sort: '0',
                    icon: '',
                    isFrame: '1',
                    visible: '0',
                    status: '0',
                    isCache: '1',
                    component: ''
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '100px'
                },
                // 验证项
                formRule: {
                    moduleId: [
                        {
                            required: true,
                            message: '请选择模块',
                            trigger: 'blur'
                        }
                    ],
                    menuName: [
                        {
                            required: true,
                            message: '请输入菜单名称',
                            trigger: 'blur'
                        }
                    ],
                    sort: [
                        {
                            required: true,
                            message: '菜单顺序不能为空',
                            trigger: 'blur'
                        }
                    ],
                    path: [
                        {
                            required: true,
                            message: '请输入路由地址',
                            trigger: 'blur'
                        }
                    ],
                    component: [
                        {
                            required: true,
                            message: '请输入组件路径',
                            trigger: 'blur'
                        }
                    ],
                    perms: [
                        {
                            required: true,
                            message: '请输入权限标识',
                            trigger: 'blur'
                        }
                    ],
                    routeParam: [
                        {
                            required: false,
                            message: '请输入路由参数',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            // 修改表单配置
            updateFormConfig: {
                // 表单项
                formItems: [
                    //目录
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择模块名称',
                            label: '模块名称',
                            prop: 'moduleId',
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'treeSelect',
                            placeholder: '请选择上级菜单',
                            label: '上级菜单',
                            prop: 'parentId',
                            multiple: false,
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            label: '菜单类型',
                            prop: 'menuType',
                            width: 'w-1',
                            options: getDictDatas('system_menu_type')
                        }
                    ],
                    [
                        {
                            ltype: 'custom',
                            slotName: 'menuIcon',
                            placeholder: '点击选择图标',
                            label: '菜单图标',
                            prop: 'icon',
                            width: 'w-1',
                            isShow: false,
                            prefixIcon: 'search'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入菜单名称',
                            label: '菜单名称',
                            prop: 'menuName',
                            width: 'w-1',
                            isShow: false
                        },
                        {
                            ltype: 'inputNumber',
                            label: '显示排序',
                            prop: 'sort',
                            width: 'w-1',
                            isShow: false
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            label: '是否外链',
                            prop: 'isFrame',
                            width: 'w-1',
                            options: getDictDatas('system_menu_frame'),
                            isShow: false
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入路由地址',
                            label: '路由地址',
                            prop: 'path',
                            width: 'w-1',
                            isShow: false,
                            question:
                                '选择是外链则路由地址需要以`http(s)://`开头'
                        }
                    ],
                    //菜单
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入路由参数',
                            label: '路由参数',
                            prop: 'routeParam',
                            width: 'w-1',
                            isShow: false,
                            question:
                                '选择是外链则路由参数需要以`http(s)://`开头'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入权限字符',
                            label: '权限字符',
                            prop: 'perms',
                            isShow: false
                        }
                    ],

                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入组件路径',
                            label: '组件路径',
                            prop: 'component',
                            isShow: false,
                            disabled: false,
                            question: '选择是外链则组件路径默认会自动填充'
                        },

                        {
                            ltype: 'radio',
                            label: '是否缓存',
                            prop: 'isCache',
                            width: 'w-1',
                            options: getDictDatas('system_menu_cache'),
                            isShow: false
                        }
                    ],
                    //下面两个为通用

                    [
                        {
                            ltype: 'radio',
                            label: '显示状态',
                            prop: 'visible',
                            width: 'w-1',
                            options: getDictDatas('system_menu_visible'),
                            isShow: false
                        },
                        {
                            ltype: 'radio',
                            label: '菜单状态',
                            prop: 'status',
                            width: 'w-1',
                            options: getDictDatas('sys_normal_disable'),
                            isShow: false
                        }
                    ]

                    //按钮
                ],
                // 提交项
                formSubmit: {
                    parentId: '',
                    component: '',
                    menuType: ''
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '100px'
                },
                // 验证项
                formRule: {
                    moduleId: [
                        {
                            required: true,
                            message: '请输入模块名称',
                            trigger: 'blur'
                        }
                    ],
                    menuName: [
                        {
                            required: true,
                            message: '请输入菜单名称',
                            trigger: 'blur'
                        }
                    ],
                    sort: [
                        {
                            required: true,
                            message: '菜单顺序不能为空',
                            trigger: 'blur'
                        }
                    ],
                    path: [
                        {
                            required: true,
                            message: '请输入路由地址',
                            trigger: 'blur'
                        }
                    ],
                    component: [
                        {
                            required: true,
                            message: '请输入组件路径',
                            trigger: 'blur'
                        }
                    ],
                    perms: [
                        {
                            required: true,
                            message: '请输入权限标识',
                            trigger: 'blur'
                        }
                    ],
                    routeParam: [
                        {
                            required: false,
                            message: '请输入路由参数',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            //记录弹窗中选中的菜单类别
            menuType: '',
            // 图标选择的弹框是否显示
            iconSelectVisible: false
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        /**
         * 页面开始
         */
        async initPage() {
            await this.getModule()
            // 查询部门树列表
            await this.queryDeptTree()
            // 设置用户表单的配置项
            this.setFormsItems()
            // 查询部门列表
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 左侧部门树相关
         */
        /**
         * 查询部门树
         */
        async queryDeptTree() {
            this.baseTreeConfig.loading = true
            try {
                let res = await menuTreeselect(this.baseTreeConfig.entity)
                if (res && res.data) {
                    this.baseTreeConfig.data = res.data
                } else {
                    this.baseTreeConfig.data = []
                }
                this.baseTreeConfig.loading = false
            } catch (error) {
                this.baseTreeConfig.loading = false
            }
        },
        /**
         * 查询模块列表
         */
        async getModule() {
            this.baseTreeConfig.loading = true
            try {
                let res = await moduleSelect()
                if (res && res.data) {
                    res.data.forEach(val => {
                        let result = {
                            value: val.id,
                            label: val.name
                        }
                        this.select.options.push(result)
                    })
                } else {
                    this.baseTreeConfig.data = []
                }
                this.baseTreeConfig.loading = false
            } catch (error) {
                this.baseTreeConfig.loading = false
            }
        },

        /**
         * 中间表格相关
         */

        /**
         * 查询表格数据
         */
        async queryTableData(params) {
            this.baseTableConfig.tableConfig.loading = true
            params = JSON.stringify(params)
            let res = await menuListAll(params)
            if (res.data) {
                // 将数据转换成tree
                this.baseTableConfig.tableData = handleTree(
                    this.baseTableConfig.tableData.concat(res.data),
                    'menuId'
                )
            } else {
                this.baseTableConfig.tableData = []
            }
            this.baseTableConfig.tableConfig.loading = false
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.baseTableConfig.tableCheckedDatas = rows
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {}
            this.baseTableConfig.tableData = []
        },

        /**
         * 搜索栏相关
         */
        /**
         * 搜索栏按钮点击
         * @param {Object} params
         */
        searchBarButtonClick(params) {
            // 清空查询参数
            this.initQueryParmas()
            try {
                this[params.prop]()
            } catch (error) {
                throw new Error(error)
            }
        },
        /**
         * 重置搜索表单
         */
        resetSearchForm() {
            // 查询参数初始化
            this.initQueryParmas()
            // 重置搜索表单
            this.$refs.searchForm.resetForm()
            // 查询数据
            this.refreshTableData()
        },

        /**
         * 搜索数据
         */
        searchDatas() {
            this.$refs.searchForm.submitForm(() => {
                // 清空查询参数
                this.initQueryParmas()
                // 组装查询条件
                this.queryTableParams = {
                    ...this.searchFormConfig.formSubmit
                }
                // 查询数据
                this.queryTableData(this.queryTableParams)
            })
        },

        /**
         * 操作栏相关
         */
        /**
         * 操作项点击
         * @param {*} params
         */
        handelOptionClick(params) {
            this[params] ? this[params]() : null
        },
        /**
         * 切换搜索栏的显示状态
         */
        switchSearchStatus() {
            this.searchFormConfig.searchContenerShow = !this.searchFormConfig
                .searchContenerShow
        },
        /**
         * 刷新表格数据
         */
        async refreshTableData() {
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableData(this.queryTableParams)
            //重新查询树结构数据
            // 查询部门树列表
            await this.queryDeptTree()
            // 设置用户表单的配置项
            this.setFormsItems()
        },
        /**
         * 设置表格显示隐藏列(打开弹框)
         */
        switchTableColumn() {
            let dialogParams = {
                title: '显示/隐藏',
                width: 'auto',
                show: true,
                key: 'tableColumn'
            }
            // 设置参与表格列控制的属性（最后的数组为不参与隐藏显示设置的列）
            this.tableColumnTransferConfig.data = assemblyDataByTableColumn(
                this.baseTableConfig.tableHeader,
                'label',
                ['选择', '部门名称', '操作']
            )
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 设置表格显示隐藏列(弹框确认)
         */
        switchTableColumnButtonClick() {
            let newData = this.$refs.baseTransfer.backCheckedData()
            if (newData && newData.length > 0) {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = !newData.includes(ele.label)
                })
            } else {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = true
                })
            }
            this.handelCloseDialog()
        },
        /**
         * 设置(新增、修改)表单的表单项
         */
        async setFormsItems() {
            // 重新设置新增、修改 表单的部门树数据配置
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                'parentId',
                'options',
                this.baseTreeConfig.data
            )
            this.updateFormConfig.formItems = setFormItemProp(
                this.updateFormConfig.formItems,
                'parentId',
                'options',
                this.baseTreeConfig.data
            )
            //设置模块的值
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                'moduleId',
                'options',
                this.select.options
            )
            this.updateFormConfig.formItems = setFormItemProp(
                this.updateFormConfig.formItems,
                'moduleId',
                'options',
                this.select.options
            )
        },
        /**
         * 新增表格数据(打开弹框)
         */
        addTableData() {
            // 打开新增弹框
            let dialogParams = {
                title: '新增',
                width: '50%',
                show: true,
                key: 'addTableData'
            }
            this.handelOpenDialog(dialogParams)
            //默认打开为目录
            this.dealMenuShwo('M')
            //同时将目录的按钮选中
            this.$nextTick(() => {
                this.initAddForm()
            })
        },
        /**
         * 新增数据确认提交(弹框确认)
         */
        addFormButtonClick() {
            this.$refs['addForm'].submitForm(async res => {
                if (res) {
                    //如果没有传父id，则默认为0，即为顶层目录
                    if (undefined === res.parentId) {
                        res.parentId = '0'
                    }
                    //默认将其转换为字符串
                    // res.parentId = res.parentId[0]
                    let assRes = await menuSave(res)

                    if (assRes && assRes.code === 0) {
                        this.$message.closeAll()
                        this.$message.success({ message: '新增成功！' })
                    } else {
                        this.$message.closeAll()
                        this.$message.error({ message: '新增失败！' })
                    }
                    this.handelCloseDialog()
                    // 查询数据
                    this.refreshTableData()
                    this.initAddForm()
                }
            })
        },
        /**
         * 初始化新增表单
         */
        initAddForm() {
            this.addFormConfig.formSubmit = {
                menuType: 'M',
                sort: '0',
                isFrame: '1',
                visible: '0',
                status: '0',
                isCache: '1'
            }
            this.$refs.addForm.resetForm()
        },
        /**
         * 修改表格数据(打开弹框)
         */
        async updateTableData(row) {
            //将parent转换为数组
            if (row.parentId == 0) {
                row.parentId = null
            } else {
                row.parentId = [row.parentId]
            }
            if (row.sort === 'undefined' || !row.sort) {
                row.sort = ''
            } else {
                row.sort = row.sort + ''
            }
            // row.sort = row.sort + ''
            row.isFrame = row.isFrame + ''
            row.isCache = row.isCache + ''
            this.updateFormConfig.formSubmit = this.$_.cloneDeep(row)
            // 打开修改弹框
            let dialogParams = {
                title: '修改',
                width: '50%',
                show: true,
                key: 'updateTableData'
            }
            this.handelOpenDialog(dialogParams)
            this.dealMenuShwo(row.menuType)
        },
        /**
         * 修改数据提交(弹框确认)
         */
        updateFormButtonClick() {
            this.$refs['updateForm'].submitForm(async res => {
                if (res) {
                    if (res.parentId != null && Array.isArray(res.parentId)) {
                        res.parentId = res.parentId.join(',')
                    }
                    let assRes = await menuUpdate(res)
                    if (assRes && assRes.code === 0) {
                        this.$message.closeAll()
                        this.$message.success({ message: '修改成功！' })
                    } else {
                        this.$message.closeAll()
                        this.$message.error({ message: '修改失败！' })
                    }
                    this.handelCloseDialog()
                    // 查询数据
                    this.refreshTableData()
                    this.initUpdateForm()
                }
            })
        },
        /**
         * 初始化修改表单
         */
        initUpdateForm() {
            this.updateFormConfig.formSubmit = {}
        },
        /**
         * 删除表格数据
         */
        deleteTableData(rows) {
            if (
                typeof rows === 'undefined' &&
                this.baseTableConfig.tableCheckedDatas.length > 0
            ) {
                rows = this.baseTableConfig.tableCheckedDatas
            }
            if (typeof rows !== 'undefined') {
                let params = []
                if (Array.isArray(rows) && rows.length) {
                    for (let i = 0; i < rows.length; i++) {
                        const element = rows[i]
                        params.push(element.userId)
                    }
                } else {
                    params = [rows.menuId]
                }
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        let res = await menuDelete(params)
                        if (res && res.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            })
                        }
                        // 查询数据
                        this.refreshTableData()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择数据！'
                })
            }
        },
        /**
         * 修改数据的状态
         * @param {*} row
         */
        async switchStatus(row) {
            this.$confirm(
                `是否将该【
               ` +
                    row.menuName +
                    `
                】功能的状态设置为${row.status === '0' ? '启用' : '停用'}?`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            )
                .then(async () => {
                    row.parentId = row.parentId[0]
                    this.updateFormConfig.formSubmit = row
                    this.updateFormConfig.formSubmit.status = row.status
                    let assRes = await menuUpdate(
                        this.updateFormConfig.formSubmit
                    )
                    if (assRes && assRes.code === 0) {
                        this.$message.closeAll()
                        this.$message.success({ message: '修改成功！' })
                    } else {
                        this.$message.closeAll()
                        this.$message.error({ message: '修改失败！' })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    })
                    // 查询数据
                    this.refreshTableData()
                })
        },

        /**
         * 弹框相关
         */
        /**
         * 打开弹框
         * @param {*} params
         */
        handelOpenDialog(params) {
            this.addFormConfig.formRule.component[0].required = true
            this.addFormConfig.formRule.perms[0].required = true
            this.addFormConfig.formRule.path[0].required = true
            //修改的
            this.updateFormConfig.formRule.component[0].required = true
            this.updateFormConfig.formRule.perms[0].required = true
            this.updateFormConfig.formRule.path[0].required = true
            this.dialogConfig = params
        },
        /**
         * 初始化弹框
         */
        handelInitDialog() {
            this.dialogConfig = {
                title: '',
                show: false,
                width: '',
                key: ''
            }
        },
        /**
         * 关闭弹框
         */
        handelCloseDialog() {
            this.handelInitDialog()
        },
        /**
         * 弹框确定
         */
        handelCofimeDialog() {
            // 表格列筛选的弹框
            if (this.dialogConfig.key === 'tableColumn') {
                this.switchTableColumnButtonClick()
            } else if (this.dialogConfig.key === 'addTableData') {
                this.addFormButtonClick()
            } else if (this.dialogConfig.key === 'updateTableData') {
                this.updateFormButtonClick()
            }
        },

        //数据权限中select的监听事件
        handelStatusChange(params) {
            if (params.prop === 'menuType') {
                this.dealMenuShwo(params.data)
                this.menuType = params.data
                //这里调用的目的是防止在菜单的位置选择外链，然后将菜单又切换到目录中
                this.handleMenuC(params.data)
            }
            if (params.prop === 'isFrame') {
                this.handleMenuC(params.data)
            }
        },
        //根据选中的类别去判断哪些要显示/隐藏
        dealMenuShwo(type) {
            var arrm
            if (type === 'M') {
                arrm = [
                    'icon',
                    'menuName',
                    'sort',
                    'isFrame',
                    'path',
                    'status',
                    'visible'
                ]
                this.addFormConfig.formRule.component[0].required = false
                this.addFormConfig.formRule.perms[0].required = false
                //修改的
                this.updateFormConfig.formRule.component[0].required = false
                this.updateFormConfig.formRule.perms[0].required = false
            } else if (type === 'C') {
                arrm = [
                    'icon',
                    'menuName',
                    'sort',
                    'isFrame',
                    'path',
                    'status',
                    'visible',
                    'component',
                    'routeParam',
                    'isCache'
                ]
                this.addFormConfig.formRule.component[0].required = true
                this.addFormConfig.formRule.path[0].required = true
                this.addFormConfig.formRule.perms[0].required = false
                //修改的
                this.updateFormConfig.formRule.component[0].required = true
                this.updateFormConfig.formRule.path[0].required = true
                this.updateFormConfig.formRule.perms[0].required = false
            } else if (type === 'F') {
                arrm = ['menuName', 'sort', 'perms']
                this.addFormConfig.formRule.component[0].required = false
                this.addFormConfig.formRule.path[0].required = false
                this.addFormConfig.formRule.perms[0].required = true

                //修改的
                this.updateFormConfig.formRule.component[0].required = false
                this.updateFormConfig.formRule.path[0].required = false
                this.addFormConfig.formRule.perms[0].required = true
            }

            this.showDataDeal(arrm)
        },
        //修改新增、修改页面的表单项
        showDataDeal(params) {
            //此处是一直要保持显示的
            var alwayshow = ['parentId', 'menuType', 'moduleId']
            this.addFormConfig.formItems.forEach(values => {
                values.forEach(val => {
                    if (alwayshow.indexOf(val.prop) == -1) {
                        if (params.indexOf(val.prop) > -1) {
                            this.setFormsItemsM(val.prop, 'isShow', true)
                        } else {
                            this.setFormsItemsM(val.prop, 'isShow', false)
                        }
                    }
                })
            })

            this.updateFormConfig.formItems.forEach(values => {
                values.forEach(val => {
                    if (alwayshow.indexOf(val.prop) == -1) {
                        if (params.indexOf(val.prop) > -1) {
                            this.setFormsItemsM(val.prop, 'isShow', true)
                        } else {
                            this.setFormsItemsM(val.prop, 'isShow', false)
                        }
                    }
                })
            })
        },

        //设置表单项
        setFormsItemsM(prop, labe, flag) {
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                prop,
                labe,
                flag
            )
            this.updateFormConfig.formItems = setFormItemProp(
                this.updateFormConfig.formItems,
                prop,
                labe,
                flag
            )
        },
        expandData() {
            this.expandAll = !this.expandAll
            if (this.expandAll) {
                this.$refs.dataOption.updateButtonStatus(
                    'expandData',
                    'type',
                    'primary'
                )
                this.$refs.dataOption.updateButtonStatus(
                    'expandData',
                    'label',
                    '收起'
                )
            } else {
                this.$refs.dataOption.updateButtonStatus(
                    'expandData',
                    'type',
                    'info'
                )
                this.$refs.dataOption.updateButtonStatus(
                    'expandData',
                    'label',
                    '展开'
                )
            }
            this.$refs.baseTable.toggleRowExpansion()
        },
        handleMenuC(param) {
            //菜单的外链选中是
            if (param === '0' && this.menuType === 'C') {
                //1.路由参数设置为必填
                this.addFormConfig.formRule.routeParam[0].required = true
                this.updateFormConfig.formRule.routeParam[0].required = true

                //2.组件路径设置一个固定值，且不让更改
                this.addFormConfig.formSubmit.component = 'InnerLink'
                this.updateFormConfig.formSubmit.component = 'InnerLink'

                this.setFormsItemsM('component', 'disabled', true)
            } else {
                //选中否的时候，将选中是的状态全部还原回来
                this.addFormConfig.formRule.routeParam[0].required = false
                this.updateFormConfig.formRule.routeParam[0].required = false
                this.$set(this.addFormConfig.formSubmit, 'component', '')
                this.$set(this.updateFormConfig.formSubmit, 'component', '')

                this.setFormsItemsM('component', 'disabled', false)
            }
        },
        handelInputPrependSelectChange(val) {
            console.log('val', val)
        },
        /**
         * 此方法主要是用来监控新增/修改的弹窗打开的时候，选择模块后，对部门数据进行筛选
         */
        async handerOnSelectChange(params) {
            if ('moduleId' === params.prop) {
                this.baseTreeConfig.entity.moduleId = params.data
                // 查询部门树列表
                await this.queryDeptTree()
                // 设置用户表单的配置项
                this.setFormsItems()
            }
        },

        //图标选择相关
        handleClose(done) {
            this.$confirm('确认关闭？')
                // eslint-disable-next-line no-unused-vars
                .then(_ => {
                    done()
                })
                // eslint-disable-next-line no-unused-vars
                .catch(_ => {})
        },
        // 选择了菜单图标
        handelCheckedMenuIcon(params) {
            if (this.dialogConfig.key === 'addTableData') {
                this.$set(this.addFormConfig.formSubmit, 'icon', params)
            } else if (this.dialogConfig.key === 'updateTableData') {
                this.$set(this.updateFormConfig.formSubmit, 'icon', params)
            }
            this.iconSelectVisible = false
        }
    }
}
</script>
<style lang="scss" scoped>
.menu-icon {
    position: relative;
    overflow: auto;
    .icon-pane {
        @include box_absolute(
            $width: 100%,
            $height: 300px,
            $top: 100%,
            $left: 0
        );

        background: red;
    }
}
</style>
